<template>
  <div>
    <common-head title="商品详情"></common-head>
    <div class="wrap">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in pics" :key="banner.id">
          <img :src="banner.pic" alt="">
        </van-swipe-item>
      </van-swipe>
      <p class="title">{{ basicInfo.name }}</p>
      <div class="content" v-html="content"></div>
      <div class="popUp">
        <van-goods-action>
          <van-goods-action-icon icon="wap-home-o" @click="$router.push('/home')" text="首页" />
          <van-goods-action-icon icon="cart-o"  @click="$router.push('/carts')" text="购物车" :badge="$store.state.cart.items.length || '' " />
          <van-goods-action-button
            type="warning"
            text="加入购物车"
            @click="onClickButton(0)"
          />
          <van-goods-action-button
            type="danger"
            text="立即购买"
            @click="onClickButton(1)"
          />
        </van-goods-action>
        <van-popup v-model="show" position="bottom" :style="{ height: '33%' }" closeable>
          <div>
            <van-card
              :num="sku.number"
              :price="sku.minPrice"
              :title="sku.name"
              :thumb="sku.pic"
            >
              <template #footer>
                <van-stepper v-model="sku.number" />
                <van-button type="primary" size="large" round class="confirm-popup" @click="commit" >确认</van-button>
              </template>
            </van-card>
          </div>
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
import CommonHead from '@components/CommonHead'
import { fetchDetails, addCart } from '@api'
import { Toast } from 'vant'
export default {
  components: {
    CommonHead
  },
  data () {
    return {
      basicInfo: {},
      pics: [],
      content: '',
      sku: {
        number: 1
      },
      show: false,
      actionType: true // 0加入购物车 1立即购买
    }
  },
  created () {
    this.fetchDetails()
  },
  methods: {
    commit () {
      // 点击提交判断跳转路由
      if (this.actionType) {
        alert('立即购买')
      } else {
        addCart({
          goodsId: this.sku.id,
          number: this.sku.number,
          token: localStorage.getItem('token')
        }).then(res => {
          if (res.data.code === 0) {
            this.$store.commit('cart/init_cart_info', {
              items: res.data.data.items,
              total: res.data.data.price
            })
            Toast({
              type: 'success',
              message: '成功加入购物车',
              duration: 2000
            })
          }
        })
      }
      this.show = false
    },
    fetchDetails () {
      fetchDetails(this.$route.query.id).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.basicInfo = res.data.data.basicInfo
          this.pics = res.data.data.pics
          this.content = res.data.data.content.replace(/<img/gi, '<img style="display:block;width:100%"')
          this.sku = { ...this.sku, ...res.data.data.basicInfo }
        }
      })
    },
    onClickButton (type) {
      this.show = !this.show
      this.actionType = type
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.wrap{
  padding-top:50px;
  .my-swipe{
    img{
      width: 100%;
    }
  }
  .title{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    line-height: 50px;
  }
  .content{
    padding-bottom: 40px;
    text-align: center;
  .popUp{
    .van-popup{
      .van-button{
        top:36px;
      }
    }
  }
}
}
</style>
